<template>
  <div class="request">
    <el-form
      :model="results"
      :inline="true"
      size="mini"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="订单类型">
        <el-select v-model="results.orderType" clearable>
          <el-option label="会员卡订单" value="vipCard"></el-option>
          <el-option label="机票订单" value="flight"></el-option>
          <el-option label="酒店订单" value="hotel"></el-option>
          <el-option label="贵宾厅订单" value="vipLounge"></el-option>
          <el-option label="vip通道订单" value="vipChannel"></el-option>
          <el-option label="火车票订单" value="train"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员姓名">
        <el-input
          v-model="results.userName"
          placeholder="请输入客户信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员手机号">
        <el-input
          v-model="results.userAccount"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="会员卡号">
        <el-input
          v-model="results.cardCode"
          placeholder="请输入会员卡号"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="会员退款方式">
        <el-select v-model="results.refundType" clearable>
          <el-option label="原路退回" value="backtracking"></el-option>
          <el-option label="退预留款" value="reserveAmount"></el-option>
          <el-option label="退银行卡" value="bankCard"></el-option>
          <!-- <el-option label="全部" value=""></el-option>
          <el-option label="公司汇款给会员" value="1"></el-option>
          <el-option label="原路退预留款" value="5"></el-option>
          <el-option label="原路退信用卡" value="6"></el-option>
          <el-option label="原路微信自动退款" value="3"></el-option>
          <el-option label="原路支付宝自动退款" value="4"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="退款状态">
        <el-select v-model="results.refundStatus" clearable>
          <el-option label="待申请" value="stayApply"></el-option>
          <el-option label="取消申请" value="cancelApply"></el-option>
          <el-option label="待审核" value="stayAudit"></el-option>
          <el-option label="审核不通过" value="cancelAudit"></el-option>
          <el-option label="待支付" value="stayPay"></el-option>
          <el-option label="取消支付" value="cancelPay"></el-option>
          <el-option label="支付失败" value="payFailure"></el-option>
          <el-option label="支付成功" value="paySuccess"></el-option>
          <!-- <el-option label="全部" value=""></el-option>
          <el-option label="初始" value="initial"></el-option>
          <el-option label="已申请" value="requested"></el-option>
          <el-option label="完成(退款完成)" value="complete"></el-option>
          <el-option label="取消" value="cancel"></el-option>
          <el-option label="已审核" value="reviewed"></el-option>
          <el-option label="入预留款" value="deposit"></el-option>
          <el-option label="审核失败" value="auditFailed"></el-option>
          <el-option label="退款失败" value="refundFailed"></el-option>
          <el-option label="退款中" value="refunding"></el-option> -->
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="退款时间">
        <el-date-picker v-model="results.applyTime" type="date" format="yyyy-MM-dd" placeholder="退款时间">
        </el-date-picker>
      </el-form-item> -->
      <!-- <el-form-item label="订单号">
        <el-input v-model="results.orderId"  placeholder="请输入订单号"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="viewBillDetails">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      class="account_table"
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
    >
      <el-table-column
        fixed
        prop="orderType"
        label="退款订单类型"
        align="cneter"
        width="100"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.orderType == 'flight'">飞机票订单</template>
          <template v-if="scope.row.orderType == 'train'">火车票订单</template>
          <template v-if="scope.row.orderType == 'hotel'">酒店订单</template>
          <template v-if="scope.row.orderType == 'vipCard'"
            >会员卡订单</template
          >
          <template v-if="scope.row.orderType == 'vipLounge'"
            >贵宾厅订单</template
          >
          <template v-if="scope.row.orderType == 'vipChannel'"
            >VIP通道订单</template
          >
        </template>
      </el-table-column>
      <el-table-column fixed prop="userName" label="会员姓名"  width="100">
      </el-table-column>
      <el-table-column fixed prop="userAccount" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="refundStatus" label="退款状态" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.refundStatus == 'stayApply'"
            >待申请</template
          >
          <template v-if="scope.row.refundStatus == 'cancelApply'"
            >取消申请</template
          >
          <template v-if="scope.row.refundStatus == 'stayAudit'"
            >待审核</template
          >
          <template v-if="scope.row.refundStatus == 'cancelAudit'"
            >审核不通过</template
          >
          <template v-if="scope.row.refundStatus == 'stayPay'">待支付</template>
          <template v-if="scope.row.refundStatus == 'cancelPay'"
            >取消支付</template
          >
          <template v-if="scope.row.refundStatus == 'payFailure'"
            >支付失败</template
          >
          <template v-if="scope.row.refundStatus == 'paySuccess'"
            >支付成功</template
          >
        </template>
      </el-table-column>
      <el-table-column prop="refundType" label="退款方式" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.refundType == 'backtracking'"
            >原路退回</template
          >
          <template v-if="scope.row.refundType == 'reserveAmount'"
            >退预留款</template
          >
          <template v-if="scope.row.refundType == 'bankCard'"
            >退银行卡</template
          >
        </template>
      </el-table-column>
      <el-table-column
      width="120"
        prop="refundCashAmount"
        label="退款现金金额"
      ></el-table-column>
      <el-table-column prop="refundReserveAmount" label="退款预留款金额" width="120">
      </el-table-column>
      <el-table-column prop="refundGoldAmount" label="退款金币金额" width="120">
      </el-table-column>
      <el-table-column prop="createDateTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column prop="createAdminName" label="创建人" width="120"> </el-table-column>
      <el-table-column prop="applyAdminName" label="申请人" width="120"> </el-table-column>
      <el-table-column prop="auditAdminName" label="审核人" width="120"> </el-table-column>
      <!-- <el-table-column prop="payAdminName" label="支付人" width="120"> </el-table-column> -->
      <el-table-column fixed="right" label="申请退款" width="260">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)" size="mini"
            >修改</el-button
          >
          <el-button
          v-if="scope.row.refundStatus == 'stayApply'"
            size="mini"
            type="primary"
            @click="isAdopt('stayAudit', scope.row)"
            >申请退款</el-button
          >
          <el-button
          v-if="scope.row.refundStatus == 'stayApply'"
            type="primary"
            size="mini"
            @click="isAdopt('cancelApply', scope.row)"
            >取消退款</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- 确认退款申请 -->
    <el-dialog
      title="退款申请确认页面"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
       width="60%"
    >
      <el-descriptions class="margin-top" :column="3" :size="size" border>
        <el-descriptions-item>
          <template slot="label"> 退款类型 </template>
          {{
            application.orderType == "vipCard"
              ? "会员卡"
              : application.orderType == "flight"
              ? "飞机票"
              : application.orderType == "train"
              ? "火车票"
              : application.orderType == "hotel"
              ? "酒店"
              : application.orderType == "vipLounge"
              ? "贵宾厅"
              : "VIP通道"
          }}
        </el-descriptions-item>
         <el-descriptions-item>
          <template slot="label"> 退款订单号 </template>
          {{ application.refundApplyNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退款现金金额 </template>
          {{ application.refundCashAmount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退款预留款金额 </template>
          {{ application.refundReserveAmount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退款金币金额 </template>
          {{ application.refundGoldAmount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
          {{
            application.refundStatus == "stayApply"
              ? "待申请"
              : application.refundStatus == "cancelApply"
              ? "取消申请"
              : application.refundStatus == "stayAudit"
              ? "待审核"
              : application.refundStatus == "cancelAudit"
              ? "审核不通过"
              : application.refundStatus == "stayPay"
              ? "待支付"
              : application.refundStatus == "cancelPay"
              ? "取消支付"
              : application.refundStatus == "payFailure"
              ? "支付失败"
              : "支付成功"
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户名称 </template>
          {{ application.userName }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 支付订单号 </template>
          {{ application.orderId }}
        </el-descriptions-item>-->
            <el-descriptions-item>
          <template slot="label"> 创建人 </template>
          {{ application.createAdminName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请人 </template>
          {{ application.applyAdminName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 审核人 </template>
          {{ application.auditAdminName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退回方式 </template>
          <el-select
            v-model="application.refundType"
            placeholder="请选择"
            size="mini"
            style="width: 100px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item v-if="application.refundType =='bankCard'">
          <template slot="label"> 银行卡号 </template>
          <el-input v-model="application.bankCardNumber"  size="mini"></el-input>
          <!-- {{ application.bankCardNumber }} -->
        </el-descriptions-item>
        <el-descriptions-item  v-if="application.refundType =='bankCard'">
          <template slot="label"> 开户银行 </template>
          <el-input v-model="application.bankName" size="mini"></el-input>
          <!-- {{ application.bankName }} -->
        </el-descriptions-item>
        <el-descriptions-item v-if="application.refundType =='bankCard'">
          <template slot="label"> 开户城市 </template>
          <el-input v-model="application.bankCardCity" size="mini"></el-input>
          <!-- {{ application.bankCardCity }} -->
        </el-descriptions-item>
        <el-descriptions-item v-if="application.refundType =='bankCard'">
          <template slot="label"> 持卡人 </template>
          <el-input v-model="application.bankCardName" size="mini"></el-input>
          <!-- {{ application.bankCardName }} -->
        </el-descriptions-item>
    
   
        <!-- <el-descriptions-item>
          <template slot="label"> 收款金额 </template>
          {{ application.collectionAmount }}
        </el-descriptions-item> -->
        <!-- <el-descriptions-item>
          <template slot="label"> 收款渠道 </template>
          {{
            application.collectionType == "Wechat"
              ? "微信"
              : application.collectionType == "Alipay"
              ? "支付宝"
              : application.collectionType == "UnionPay"
              ? "银联"
              : application.collectionType == "UnionPayQRCode"
              ? "银联二维码支付"
              : application.collectionType == "BankDebit"
              ? "银行卡借记卡"
              : application.collectionType == "BankCredit"
              ? "银行信用卡"
              : application.collectionType == "UnionQRCodePay"
              ? "银联二维码"
              : application.collectionType == "PhoneSoundPay"
              ? "电话语音支付"
              : application.collectionType == "PresentPay"
              ? "总办赠卡支付"
              : ""
          }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 备注 </template>
          <el-input v-model="application.refundRemark" size="mini"></el-input>
          <!-- {{ application.refundRemark }} -->
        </el-descriptions-item>

       
      </el-descriptions>
      <span slot="footer" class="footer">
        <!-- <el-button size="mini" @click="getupdApplyRefundRecoed('stayAudit')"
          >申请退款</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="getupdApplyRefundRecoed('cancelApply')"
          >取消退款</el-button
        > -->
        <el-button type="primary" size="mini" @click="editMethod"
          >保存</el-button
        >
        <el-button type="primary" size="mini" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核通过弹窗 -->
    <el-dialog
      :title="isAdoptTitle"
      :visible.sync="isAdoptDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span v-if="isAdoptType == 'stayAudit'">确认申请退款吗？</span>
      <span v-if="isAdoptType == 'cancelApply'">确认取消申请退款吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAdoptDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="isAdoptSureMethod()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customerRefundRequest",
  data() {
    return {
      // 是否通过弹窗
      // 退回方式数组
      options: [
        {
          value: "backtracking",
          label: "原路退回",
        },
        {
          value: "reserveAmount",
          label: "退预留款",
        },
        {
          value: "bankCard",
          label: "退银行卡",
        },
      ],
      pageSize: 10,
      pageTotal: 0,
      results: {
        orderType: null,
        userName: null,
        userAccount: null,
        refundStatus: null,
        refundType: null,
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      dialogVisible: false,
      application: {},
      size: "",
      isAdoptId: null,
      isAdoptType: null,
      isAdoptTitle: "申请退款",
      isAdoptDialogVisible: false,
    };
  },

  methods: {
    isAdopt(type, row) {
      this.isAdoptType = type;
      this.isAdoptId = row.id;
      this.isAdoptTitle = type == "stayAudit" ? "申请退款" : "取消申请退款";
      this.isAdoptDialogVisible = !this.isAdoptDialogVisible;
    },
    viewBillDetails() {
      this.results.pageSize = 10;
      this.results.pageNo = 1;
      this.getRefundApplyByApply();
    },
    // 会员退款申请列表
    getRefundApplyByApply() {
      this.$axios
        .getRefundApplyByApply({
          orderType: this.results.orderType,
          userName: this.results.userName,
          userAccount: this.results.userAccount,
          refundStatus: this.results.refundStatus,
          refundType: this.results.refundType,
          pageSize: this.results.pageSize,
          pageNo: this.results.pageNo,
        })
        .then((res) => {
          if (res.code == "00000") {
            console.log(res);
            this.tableData = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 分页
    handleSizeChange(value) {
      this.results.pageSize = value;
      this.getRefundApplyByApply();
    },
    handleCurrentChange(value) {
      this.results.pageNo = value;
      this.getRefundApplyByApply();
    },
    // // 退款申请确认
    // getorderRefundmentDetails(id) {
    //   this.$axios
    //     .getorderRefundmentDetails({
    //       refundmentId: id,
    //     })
    //     .then((res) => {
    //       if (res.code == "200") {
    //         console.log(res);
    //         this.application = res.data;
    //       }
    //     });
    // },
    handleClose() {
      this.dialogVisible = false;
    },
    // 申请退款按钮
    handleClick(row) {
      this.$axios
        .getRefundApplyInfoById({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.dialogVisible = !this.dialogVisible;
            this.application = res.data.financeRefundApplyBO;
          }
        });
    },
    // 修改退款信息
    editMethod() {
      this.$axios
        .getupdApplyRefundRecoed({
          id: this.application.id,
          refundRemark: this.application.refundRemark,
          refundType: this.application.refundType,
          bankCardName: this.application.bankCardName,
          bankCardNumber: this.application.bankCardNumber,
          bankCardCity: this.application.bankCardCity,
          bankName: this.application.bankName,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.dialogVisible = !this.dialogVisible;
            this.getRefundApplyByApply();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    // 申请状态
    isAdoptSureMethod() {
      this.$axios
        .getupdApplyRefundStatus({
          id: this.isAdoptId,
          refundStatus: this.isAdoptType,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.isAdoptDialogVisible = !this.isAdoptDialogVisible;
            this.getRefundApplyByApply();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
  },
  mounted() {
    this.getRefundApplyByApply(); // 会员退款申请列表
  },
};
</script>

<style scoped>
.request {
  margin: 30px 0 0 30px;
}


.blue-descriptions {
  background-color: #e8f3f7;
}
</style> 